<template>
  <div title="分割线" class="tlbr-btn hm">
    <div class="tlbr-btn__icon">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M5 6.00002V7.40003C5 7.95231 5.44772 8.40002 6 8.40002H18C18.5523 8.40002 19 7.95231 19 7.40002V6.00002"
          stroke="currentColor"
          stroke-width="1.2"
          stroke-linecap="round"
        ></path>
        <path
          d="M19 18V16.6C19 16.0477 18.5523 15.6 18 15.6H6C5.44771 15.6 5 16.0477 5 16.6V18"
          stroke="currentColor"
          stroke-width="1.2"
          stroke-linecap="round"
        ></path>
        <line
          x1="5.5"
          y1="12.1"
          x2="18.5"
          y2="12.1"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-dasharray="1 2"
        ></line>
      </svg>
    </div>
    <svg
      width="4"
      height="4"
      viewBox="0 0 4 4"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="tlbr-btn__dot"
    >
      <path d="M4 0V4H0L4 0Z" fill="#222222"></path>
    </svg>
    <div class="tlbr-btn__more">
      <div class="tlbr-btn__more__tooltip">
        <ul class="bre-toolbar__optlist divline">
          <li
            class="bre-toolbar__optbtn"
            v-for="item in cutOffTypeList"
            :key="item.type"
            @click="handleInsertCutOff(item)"
          >
            <img :src="item.src" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, inject, shallowRef } from 'vue'
import Quill from 'quill'
// import '@/assets/divline/cutoff0.png'
const QuillEditor = inject('QuillEditor', shallowRef<Quill>())
const list = [
  { type: 0, src: '/src/assets/divline/cutoff0.png' }, //绝对路径 或相对路径，不能包含@
  { type: 1, src: '/src/assets/divline/cutoff1.png' },
  { type: 2, src: '/src/assets/divline/cutoff2.png' },
  { type: 3, src: '/src/assets/divline/cutoff3.png' },
  { type: 4, src: '/src/assets/divline/cutoff4.png' },
  { type: 5, src: '/src/assets/divline/cutoff5.png' },
]
const cutOffTypeList = ref<{ type: number; src: string }[]>([])

const handleInsertCutOff = (item: { type: number }) => {
  QuillEditor.value?.insertCutOff(item)
}

onMounted(() => {
  list.forEach(async (item) => {
    const _item = {
      type: item.type,
      src: (await import(item.src)).default as string,
    }
    cutOffTypeList.value.push(_item)
  })
})
</script>
<style lang="scss" scoped></style>
